<template>
  <el-button class="btn" @click="addClass" :title="$t('class.addclass')"><el-icon><Plus/></el-icon>{{ $t('class.Plus') }}</el-button>
    <el-dialog v-model="dialogFormVisible" title="Insert Class Information">
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
    size="default" @submit.prevent>
    <el-row>
      <el-col :span="12" class="grid-cell">
        <el-form-item :label="$t('class.privacy')" prop="privacy">
          <el-radio-group v-model="formData.privacy">
            <el-radio v-for="(item, index) in privacyOptions" :key="index" :label="item.value"
              :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('class.classname')" prop="classname">
          <el-input v-model="formData.className" type="text" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('class.classsize')" prop="classNumber">
          <el-input v-model="formData.classNumber" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
        <el-col :span="12" class="grid-cell">
        <el-form-item :label="$t('class.addcover')" prop="cover">
          <el-input v-model="formData.cover" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item :label="$t('class.classprofile')" prop="classprofile">
      <el-input type="textarea" v-model="formData.classprofile" rows="3"></el-input>
    </el-form-item>
    <div class="static-content-item">
      <div>{{ $t('class.headteacher') }}</div>
    </div>
    <el-transfer
    v-model="tearcherSelect"
    :data="tearcherData"
    :titles="['All', 'Designate']"
  />
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmBtn">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
 </template>
 <script>
 import { Plus } from '@element-plus/icons-vue';
  export default {
  name: 'ADD_Class_TABLE',
  props:[],
  components:{
   Plus,
  },
  data: function(){
  return {
    dialogFormVisible:false,
   formData: {
             privacy:"null",
             classId:"",
             className:"",
             cover: null,
             creatTime:"",
             classNumber:"",
             classprofile: "",
            teacher: "",
           },
           privacyOptions: [{
             "label": "公开班级",
             "value": 1
           }, {
             "label": "私密班级",
             "value": 0
           }],
           tearcherData:[
            {key:'',label:''},
            
           ],
           tearcherSelect:[]
  }
  },
  methods:{
   addClass(){
     this.dialogFormVisible = true;
   },
   addClassBtn(){
     var that = this;
     that.formData.classId=window.sessionStorage.getItem('token2');
     window.http.post('/api/Class/addClass',this.formData).then(res => {
             console.info(JSON.stringify(res));
             var data = res.data;
             if(data.success){
                 that.$message.success("添加成功");
                 that.$emit("reback");
                 that.dialogVisible = false;
             }else{
                 that.$message.error("添加失败");
             } 
         })
         .catch(function(error){
             that.$message.error("服务器异常")
         });
   },
   confirmBtn(){
    this.formData.teacher=this.tearcherData[this.tearcherSelect-1].label;
    var _this = this;
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth()+1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    this.formData.creatTime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
    this.addClassBtn();
   },
   query(){
    var that = this;
    window.http.post('/api/Class/query',{}).then(res => {
             console.info(res);
             var data = res.data;
             that.tearcherData = data;
             console.log(this.tearcherData);
         });
   }
   
  },
  mounted(){
    this.query();
  },
  unmounted(){
    
  }
  }
 </script>
 <style>
 html,
  body, 
  #app{
  height: 100%;
  }
 </style>
 <style scoped>
  .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  }
  .tr{
  width: 200px;
  flex-basis: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: beige;
  align-items: center;
  }
  .second{
  background-color: aqua;
  }
 </style>